<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="4" v-for="i in EnglishArray" :key="i">
				<div>
					<el-button @click="getLetter(i)" style="width: 20%;">{{i}}</el-button>
				</div>
			<br>
			</el-col>
			<br>
			<el-col :span="4" v-for="i in NumberArray" :key="i">
				<div>
					<el-button @click="getLetter(i)" style="width: 20%;">{{i}}</el-button>
				</div>
			<br>
			</el-col>
			<el-col :span="6">
				<el-button @click="clearNum" type="danger">重置</el-button>
			</el-col>
			<el-col :span="6">
				<el-button type="success" @click="closeKeybord">收起</el-button>
			</el-col>
      <el-col :span="6">
        <el-button type="info" @click="back">C</el-button>
      </el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	data() {
		return {
			EnglishArray:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
			NumberArray:[1,2,3,4,5,6,7,8,9,0],
			totalNum:'',
			panNum:''
		};
	},

	created() {},

	methods: {
		closeKeybord(){
			this.$emit("getLetter",'close')
		},

    //回退
    back(){
      let num = this.totalNum.toString().substring(0,this.totalNum.length -1)
      this.totalNum = num
      this.$emit("getLetter",num)
      console.log("number  "+this.totalNum.length)
    },

		//确认
		getInputLetter(){
			this.$emit("getLetter",this.totalNum)
		},

		getLetter(num){

			this.totalNum += num.toString()
			this.getInputLetter();
		},
		//清除数据
		clearNum(){
			this.totalNum = ''
			this.getInputLetter();
		},

	},


};
</script>

<style>
#app {
	width: 100%;
	padding: 20px 20px 10px;
	border-radius: 4px;
	margin: 0px auto;
	background: #ffffff;

	box-sizing: border-box;
}

#input-box {
	display: block;
	width: 100%;
	height: 46px;
	margin-bottom: 15px;
	border: none;
	border-radius: 6px;
	background:#77baa2;

	padding: 0 5px;
	text-align: right;
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 1px;
}

#calc-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#calc-box .btn {
	font-size: 20px;
	width: 30%;
	height: 40%;
	text-align: center;
	line-height: 40px;
	border-radius: 6px;
	cursor: pointer;
	background: 	#B0E0E6;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 12px;
	box-shadow: 0 2px rgba(0, 0, 0, 0.2);
}

#app .btn-double {
	width: 115px;
	background: #ffc690;
	box-shadow: 0 4px #ab7c50;
}

#app .clear {
	background: #ff94e6;
	box-shadow: 0 4px #d631af;
	color: #fff;
}

#app .operator {
	background: #FFB6C1;
	color: white;
}

#app .operator1 {
	background: #428ec8;
	color: white;
}

#app .back {
	background: #f1ff98;
	box-shadow: 0 4px #9da858;
}
</style>
